<template>
	<view class="padding-20 containear">
		<view class="nav-wrapper">
			<view style="background-color: transparent;" class="status-bar-height"></view>
			<image class="nav-bg pos-fill" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/my/nav_bg.png" mode=""></image>
			<uni-nav-bar color="#181D18" :border="false" :fixed="true" background-color="transparent" status-bar>
				<template #left>
					<image @click="handlerBack" style="width: 20rpx;height: 34rpx;"
						src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/arrow_l.png" mode=""></image>
				</template>
				<template #default>
					<view class="font36 flex color-181D18 f-b flex-center flex-1">
						商家中心
					</view>
				</template>

			</uni-nav-bar>
		</view>
		<view class="size-box"></view>
		<ScrollView :contentHeight="contentHeight">
			<template #content>
				<UserCard :userInfo='userInfo' />
				<MyAsset />
				<view class="m-t-20 bg-w nav-list">
					<block v-for="(item, index) in navList" :key="index">
						<NavItem :dataItem="item" />
					</block>
				</view>
				<view style="height: 56rpx;"></view>
			</template>
		</ScrollView>
	</view>
</template>

<script lang="ts" setup>
	import ScrollView from '@/components/accompany/scrollView/scrollView.vue';
	import UserCard from '@/components/accompany/tabbar/my/userCard/index.vue'
	import NavItem from '@/components/accompany/tabbar/my/navItem/index.vue';
	import MyAsset from '../components/myAsset.vue';

	import { ref } from 'vue';
	import type { Ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';

	const navList = ref([
		// { label: '佣金转余额', path: '/pages/accompany-tmp/my/commissionTransferBalance/commissionTransferBalance', border: true },
		{ label: '我的团队', path: '/pages/accompany-tmp/my/teamList/teamList', border: true },
		// { label: '分销订单', path: '/pages/accompany-tmp/my/distributionList/distributionList', border: true },
		{ label: '订单管理', path: '/pagesA/merchant/orderList', border: true },
		{ label: '佣金明细', path: '/pages/accompany-tmp/my/commissionList/commissionList', border: false },
		// { label: '佣金记录', path: '/pages/accompany-tmp/my/commissionList/commissionList', border: false }
	])
	const contentHeight : Ref<number> = ref(0)
	const userInfo = ref({
		avatar: 'https://img0.baidu.com/it/u=1385079478,4019721997&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
		userName: '前端开发'
	})
	console.log(UserCard)
	onLoad(() => {
		console.log('onLoad')
		let sysInfo = uni.getStorageSync('sysInfo')
		contentHeight.value = sysInfo.screenHeight - sysInfo.statusBarHeight - 44
		console.log(contentHeight)
	})

	function handlerBack() {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.containear {
		background-color: #F5F7FB;
	}

	.size-box {
		height: 188rpx;
		padding-bottom: var(--status-bar-height);
	}

	.nav-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 0 20rpx;
		height: 488rpx;

		.nav-bg {
			width: 100%;
			height: 488rpx;
		}

		.nav-box {
			height: 88rpx;
			position: relative;
			font-weight: 500;
			color: #181D18;

			.left-text {
				font-size: 28rpx;
				margin-left: 8rpx;
			}

			.title {
				font-size: 36rpx;
			}
		}
	}

	.nav-list {
		border-radius: 32rpx;
	}
</style>